<template>
	<view>
		<view class="addressBox">
			<view class="infoBox">
				<text class="name">{{name}}</text>
				<text class="phone">{{phone}}</text>
			</view>
			<view class="detailAdress tuodiandiandian">
				<text class="adressfont">{{address}}</text>
			</view>
			<text class="gonext">></text>
		</view>
		<view class="mainBox" v-for="(item,index) in commodityData" :key="index">
			<image class="storeImg" :src="item.storeImg"></image>
			<text class="storename diandiandian">{{item.storename}}</text>
			<image class="shopimg" :src="item.shopimg"></image>
			<view class="shopnameBox tuodiandiandian">
				<text class="shopname">{{item.shopname}}</text>
			</view>
			<text class="shopmoney">￥{{item.shopmoney}}</text>
			<text class="shopnum">x{{item.shopnum}}</text>
			<text class="freeShipping">运费(免运费)</text>
			<text class="monfont">商品金额</text>
			<text class="totalmoney">￥{{item.totalmoney}}</text>
		</view>
		<view class="OrderBox">
			<text class="ordernotes">订单备注</text>
			<input class="orderinput" type="text" placeholder="请与商家协商一致"/>
		</view>
		<view class="fotter">
			<text class="yftotal">含运费合计:</text>
			<text class="total">￥{{total}}</text>
			<view class="submitOrder">
				提交订单
			</view>
		</view>
		<view class="bottom"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name:"彭于晏",
				total:'108.90',
				phone:'19155628188',
				address:'安徽省合肥市蜀山区创新产业园二期(创新大道2800号)',
				commodityData:[{
					storeImg:'../../static/index/index24.png',
					storename:'店名',
					shopimg:'../../static/shangcheng/chanping.png',
					shopname:'Gucci印花兜帽卫衣Gucci印花兜帽卫衣',
					shopmoney:'108.90',
					shopnum:'1',
					totalmoney:'108.90'
				},{
					storeImg:'../../static/index/index24.png',
					storename:'店名',
					shopimg:'../../static/shangcheng/chanping.png',
					shopname:'Gucci印花兜帽卫衣',
					shopmoney:'108.90',
					shopnum:'1',
					totalmoney:'108.90'
				},{
					storeImg:'../../static/index/index24.png',
					storename:'店名',
					shopimg:'../../static/shangcheng/chanping.png',
					shopname:'Gucci印花兜帽卫衣',
					shopmoney:'108.90',
					shopnum:'1',
					totalmoney:'108.90'
				},{
					storeImg:'../../static/index/index24.png',
					storename:'店名',
					shopimg:'../../static/shangcheng/chanping.png',
					shopname:'Gucci印花兜帽卫衣',
					shopmoney:'108.90',
					shopnum:'1',
					totalmoney:'108.90'
				}]
			};
		},
		methods:{
			goNext(){
				uni.navigateBack({
				    delta: 1
				});
			}
		}
	}
</script>

<style>
	page{
		background: #E5E5E5;
	}
	.nav{
		width: 750rpx;
		height: 100rpx;
		background: white;
		margin-top: var(--status-bar-height);
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		top: 0rpx;
		z-index: 888;
	}
	.payorder{
		font-size:34rpx;
		font-family:PingFang SC;
		font-weight:bold;
		color:rgba(51,51,51,1);
		}
		.goback{
			font-size: 40rpx;
			color:rgba(51,51,51,1);
			font-weight: bold;
			position: absolute;
			left: 30rpx;
		}
     .addressBox{
		   width:690rpx;
		   height:167rpx;
		   background:rgba(255,255,255,1);
		   border-radius:20rpx;
		   margin-left:30rpx;
		   position: relative;
	   }
	   .infoBox{
		   width: 500rpx;
		   margin-top: 20rpx;
		   height: 45rpx;
		   position: relative;
		   top: 15rpx;
		   left: 21rpx;
	   }
	   .name{
		   font-size:32rpx;
		   font-family:PingFang SC;
		   font-weight:400;
		   color:rgba(51,51,51,1);
	   }
	   .phone{
		   font-size:26rpx;
		   font-family:PingFang SC;
		   font-weight:400;
		   color:rgba(142,142,142,1);
		   margin-left: 10rpx;
	   }
	   .detailAdress{
		   width:560rpx;
		   position: relative;
		   top: 5px;
		   left: 21rpx;
	   }
	   .adressfont{
		   font-size:26rpx;
		   font-family:PingFang SC;
		   font-weight:400;
		   color:rgba(51,51,51,1);
		   line-height: 30rpx;
	   }
	   .gonext{
		   font-size: 40rpx;
		   color: #8E8E8E;
		   position: absolute;
		   top: 55rpx;
		   right: 50rpx;
	   }
	   .mainBox{
		   width: 690rpx;
		   height: 371rpx;
		   background:rgba(255,255,255,1);
		   border-radius:20rpx;
		   margin: 20rpx 30rpx;
		   position: relative;
	   }
	   .storeImg{
		   width: 32rpx;
		   height: 29rpx;
		   position: absolute;
		   top: 30rpx;
		   left: 20rpx;
	   }
	   .storename{
		   display: block;
		   width: 600rpx;
		   font-size:28rpx;
		   font-family:PingFang SC;
		   font-weight:400;
		   color:rgba(51,51,51,1);
		   position: absolute;
		   top: 25rpx;
		   left: 65rpx;
	   }
	   .shopimg{
		   width: 120rpx;
		   height: 120rpx;
		   position: absolute;
		   top: 92rpx;
		   left: 22rpx;
	   }
	   .shopnameBox{
		   width: 440rpx;
		   position: absolute;
		   top: 80rpx;
		   left: 168rpx;
		   }
	   .shopname{
		   font-size:26rpx;
		   font-family:PingFang SC;
		   font-weight:400;
		   color:rgba(51,51,51,1);
	   }
	   .shopmoney{
		   font-size:24rpx;
		   font-family:PingFang SC;
		   font-weight:400;
		   color:rgba(51,51,51,1);
		   position: absolute;
		   top: 194rpx;
		   left: 167rpx;
	   }
	   .shopnum{
		   font-size:28rpx;
		   font-family:PingFang SC;
		   font-weight:400;
		   color:rgba(142,142,142,1);
		   position: absolute;
		   top: 142rpx;
		   right: 27rpx;
	   }
	   .freeShipping{
		   font-size:28rpx;
		   font-family:PingFang SC;
		   font-weight:400;
		   color:rgba(51,51,51,1);
		   position: absolute;
		   top: 266rpx;
		   left: 21rpx;
	   }
	   .monfont{
		   font-size:28rpx;
		   font-family:PingFang SC;
		   font-weight:400;
		   color:rgba(51,51,51,1);
		   position: absolute;
		   top: 315rpx;
		   left: 21rpx;
	   }
	   .totalmoney{
		   font-size:28rpx;
		   font-family:PingFang SC;
		   font-weight:400;
		   color:rgba(255,59,48,1);
		   position: absolute;
		   top: 317rpx;
		   right: 22rpx;
	   }
	   .OrderBox{
		   width:690rpx;
		   height:100rpx;
		   background:rgba(255,255,255,1);
		   border-radius:20rpx;
		   margin-left: 30rpx;
		   margin-bottom: 150rpx;
		   display: flex;
		   align-items: center;
		   }
		   .ordernotes{
			   font-size:28rpx;
			   font-family:PingFang SC;
			   font-weight:400;
			   color:rgba(51,51,51,1);
			   position: relative;
			   left: 21rpx;
			   }
			   .orderinput{
				   width: 400rpx;
				   position: relative;
				   left: 40rpx;
				   }
				   .fotter{
					   width: 750rpx;
					   height: 100rpx;
					   background: #FFFFFF;
					   position: fixed;
					   bottom: 0rpx;
					   display: flex;
					   align-items: center;
					   }
					   .yftotal{
						   font-size: 26rpx;
						   color: #333333;
						   margin-left: 30rpx;
					   }
					   .total{
						   font-size: 28rpx;
						   color: #FF3B30;
					   }
					   .submitOrder{
						   width:350rpx;
						   height:100rpx;
						   background:rgba(115,34,216,1);
						   border-radius:20rpx;
						   font-size:38rpx;
						   font-family:PingFang SC;
						   /* font-weight:bold; */
						   color:rgba(255,255,255,1);
						   display: flex;
						   justify-content: center;
						   align-items: center;
						   position: absolute;
						   right: 30rpx;
						   }
						   /* .bottom{
							   width: 750rpx;
							   height: 150rpx;
						   } */
</style>
